<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>简单个人页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/css/reset.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="../js/plugins/jrender/jrender.min.js"></script>
    <style>
        .simplePerson {
            text-align: center;
            color: #7A786F;
            padding-top: 50px;
            padding-bottom: 110px;
            background-color: #E8E6E8;
        }

        .mymenu {
            margin: 15px auto;
        }

        .mymenu i {
            margin-right: 20px;
        }

    </style>


</head>


<body>

<div class="simplePerson">
    <img  class="rounded-circle" width="20%" render-src="headImgUrl">
    <p><strong render-html="nickName"></strong></p>
    <p render-html="email"></p>
    <hr>
    <div class="mymenu">
        <i class="fa fa-user fa-2x fa-fw"></i>
        <a data-href="/mine/profiles.html" href="javascript:;" id="myhref">
            我的</a>
    </div>
    <div class="mymenu">
        <i class="fa fa-bell fa-2x fa-fw"></i>
        <a href="#">信息</a>
    </div>
    <div class="mymenu">
        <i class="fa fa-comment fa-2x fa-fw"></i>
        <a href="#">通知</a>
    </div>
    <div class="mymenu">
        <i class="fa fa-cog fa-2x fa-fw"></i>
        <a href=/mine/info.html">设置</a>
    </div>
    <hr style="margin-top: 50px;">
    <div class="mymenu" id="logoutBtn">
        <i class="fa fa-sign-out fa-2x fa-fw"></i>
        <label>退出登录</label>
    </div>
</div>

<script>
    $(function () {
        //页面加载完毕后,获取当前页面上缓存登录用户信息

        //这里的userStr是字符串
        var userStr = sessionStorage.getItem("user");
        var user;
       if(userStr){
           //这里转换成user对象
        user  = JSON.parse(userStr);
        $(".simplePerson").renderValues(user);
       }


       //注销操作
        $("#logoutBtn").click(function () {
            $.ajax({
                url:"/sessions",
                type:"delete",
                success:function (data) {
                    if(data.success){
                        window.parent.location.href="/login.html";
                    }
                }
            });
        });



        //这里使用的是间接跳转的,主要是为了解决侧边框和主页面的重叠问题
        $("#myhref").click(function () {
          var url = $(this).data("href");
          window.parent.location.href = url;
        });

    });
</script>

</body>

</html>